#WebGL-output {
  background-color: #000;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.eux-logo {
  line-height: 64px;
  margin-left: 12px;
}

.eux-nav {
  max-width: 800px;
  margin:0 auto;
  float: none;
}

.eux-elogo {
  background: url('/dist/img/common/elogo.png') right no-repeat;
  width:62px;
  height:35px;
  background-size: 100%;
  display: inline-block;
  margin-top:15px;
  //border-left: 1px solid #242433;
}

//.eux-elogo:hover {
//  background: url('/dist/img/common/elogoh.png') right no-repeat;
//}

.eux-icon-user {
  margin-right:3px;
}

#eux-collapse-btn {
  position: absolute;
  top:20px;
  right:16px;
  color:#e5e5e5;
  text-decoration:none;
  display: none;
}
#eux-collapse-btn:hover {
  color: #fff;
}

#eux-close-side {
  display: none;
}

#star {
  background: #000;
  background: -webkit-radial-gradient(#0d141a, #1a2733);
  background: -o-radial-gradient(#0d141a, #1a2733);
  background: -moz-radial-gradient(#0d141a, #1a2733);
  background: radial-gradient(#0d141a, #1a2733);
  display: block;
}

.decoration {
  position: absolute;
}
.decoration1 {
  bottom: 10%;
  right: 15%;
}
.decoration2 {
  top: 10%;
  left: 15%;
}

.opacity-navbar {
  opacity:0.6;
  &:hover {
    opacity:1;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
  }
}

#sign {
  position: fixed;
  top: 50%;
  left: 0;
  display: block;
  width:93px;
  height:143px;
  margin-top: -70px;
}

.index-main {
  width:768px;
  margin: 0 auto;

  h1 {
    width:683px;
    margin:0 auto;
    position: relative;
    margin-top:194px;
    height: 168px;

    img {
      position: absolute;
      left:0;
      top:0;
    }
  }

  footer {
    width: 100%;
    text-align: center;
    margin-top: 50px;

    p {
      color: #808080;
      margin-bottom: 16px;

      a {
        color: #808080;

        &:hover {
          color: #fff;
        }
      }
    }
  }

}

.eux-nav-main {
  margin-top:70px;
  border-top:2px solid #283746;
  border-bottom:2px solid #283746;
  padding:15px 0;

  li {
    a {
      display: block;
      width:100%;
      height:100%;
      text-align: center;
      line-height: 45px;
      text-decoration: none;;
      color: #808080;

      &:hover {
        background-color: rgba(48, 56, 64, 0.4);
        color:#fff;
        letter-spacing:25px;
        font-size:130%;
        transition: all .2s;
      }
    }
  }
}

.about a{
  display: block;
  width:248px;
  height:46px;
  border:2px solid #3191f1;
  margin:30px auto;
  text-align: center;
  line-height: 44px;
  font-weight: bold;
  color:#fff;
  text-decoration: none;

  &:hover {
    background-color: #3191f1;
    transition:all .2s;
    color:#fff;
  }
}

.eux-nav-main {
  animation: slidedown 2s;
  overflow: hidden;
}
@keyframes slidedown {
  from {
    max-height:0;
  }
  to {
    max-height:300px;
  }
}

.eux-icon-close {
  position: absolute;
  right:16px;
  top:16px;
  text-decoration: none;
}


.eux-message {
  display: none;
  position: fixed;
  top:50%;
  transform:translateY(-50%);
  left: 50%;
  width:800px;
  margin-left: -400px;
  padding: 60px 40px;
  padding-top: 80px;
  background-color: #474766;
  z-index:10000;


  .form-group {

      input, textarea {
      width: 100%;
      padding: 6px 12px;
      background-color: #62628c;
      color:#ccc;
      border: none;
    }
  }

  .btn {
    width:120px;
  }



}

@media (max-width: 1400px) {
  .index-main {
    width: 475px;
    // margin-left:-238px;

    h1 {
      width: 400px;
      height: 120px;
      margin-top: 30%;
      img {
        width: 400px;
      }
    }
    .eux-nav-main {
      margin-top: 40px;

      li {
        a {
          line-height:35px;
        }
      }


    }

    .about {
      a {
        line-height:32px;
        width:160px;
        height:36px;
      }
    }

    footer {
      p {
        padding-top: 16px;
        margin-bottom:0;
      }
    }
  }

  .decoration1 {
    right: 5%;
  }
}

